import React from 'react';
import { connect } from 'react-redux';
import { Level2Navigator,
         Paper,
         PaperTitle,
         PaperContent,
         PaperFooter,
         BasicTable,
         MiniBarTable} from '../components/dumb';
import { ListPagesTurnButton } from '../components/smart';
import { switchQualityFeedbackView } from '../actions/qualityFeedback';
import Filter from './Filter';
import { ChartsScatter } from '../components/smart/charts';

import { KNOWLEDGE, ERROR_TOPIC } from '../../../constants/qualityFeedback';

import qulityFeedbackC1 from '../../resources/qulityFeedbackC1.png';
import qulityFeedbackC2 from '../../resources/qulityFeedbackC2.png';
import qulityFeedbackC3 from '../../resources/qulityFeedbackC3.png';
import qulityFeedbackC4 from '../../resources/qulityFeedbackC4.png';

function getAdressLable(city, county, school) {
  let arr = [city.selectedItem, county.selectedItem, school.selectedItem];
  return arr.map((item) => {
    if (item)
      return item.name;
    else
      return '';
  }).join('')
};

export default class QualityFeedback extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }
  lv2Items = [{
    ID: KNOWLEDGE,
    label:'知识点管理'
  },{
    ID: ERROR_TOPIC,
    label:'错题管理'
  }];

  handleSwitchView = (view) => {
    let { dispatch } = this.props;
    dispatch(switchQualityFeedbackView(view))

  };
  handleFilterChange = () => {

  };
  render() {
    let { level3Navigator, qualityFeedback, filter } = this.props;
    let { view } = qualityFeedback;
    let { subject, grade, dateRange, city, county, school } = filter;
    let { subView } = level3Navigator;
    /*获取各级地域名*/
    let address = getAdressLable(city,county,school);

    return (
      <div>
        <Level2Navigator items={this.lv2Items} selectedItem={view} 
          onChange={this.handleSwitchView} />
        <Filter hasDateSelector={false} hasSwitchDate={true} subView={subView} onFilterChange={this.handleFilterChange} />
       {view == KNOWLEDGE && <Paper>
             <PaperTitle>
               <div >
                 <span><b>知识点掌握概况</b></span>
               </div>
             </PaperTitle>
                <PaperContent >
                <div ><img src={qulityFeedbackC4} /><img src={qulityFeedbackC3} /><img src={qulityFeedbackC2} /><img src={qulityFeedbackC1} /></div>
                  <ChartsScatter />
                </PaperContent>
           </Paper>}
        {view == KNOWLEDGE &&<Paper>
            <PaperTitle>
              <div >
                <span><b>知识点掌握详情</b></span>
              </div>
            </PaperTitle>
            <PaperContent >
              <MiniBarTable/>
            </PaperContent>
            <PaperFooter>
              <ListPagesTurnButton pageIndex={10} onPaging={this.handleSwitchPageList} currentPageIndex={1}/>
            </PaperFooter>
          </Paper>}
        
     </div>
    );
  }
}
export default connect((state)=>state)(QualityFeedback)